'use strict';

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

// var getData = [{"id":0,"n":"A1","x":"10","y":"10","w":"80","h":"20","r":"0"},{"id":1,"n":"A1","x":"10","y":"40","w":"80","h":"20","r":"0"},{"id":2,"n":"A1","x":"10","y":"70","w":"80","h":"20","r":"0"},{"id":3,"n":"A1","x":"10","y":"100","w":"80","h":"20","r":"0"},{"id":4,"n":"A1","x":"10","y":"130","w":"80","h":"20","r":"0"},{"id":5,"n":"A1","x":"10","y":"160","w":"80","h":"20","r":"0"},{"id":6,"n":"A1","x":"10","y":"190","w":"80","h":"20","r":"0"},{"id":7,"n":"A1","x":"10","y":"220","w":"80","h":"20","r":"0"},{"id":8,"n":"A1","x":"10","y":"250","w":"80","h":"20","r":"0"},{"id":9,"n":"A1","x":"10","y":"280","w":"80","h":"20","r":"0"},{"id":10,"n":"A1","x":"10","y":"310","w":"80","h":"20","r":"0"},{"id":11,"n":"A1","x":"10","y":"340","w":"80","h":"20","r":"0"},{"id":12,"n":"A1","x":"10","y":"370","w":"80","h":"20","r":"0"},{"id":13,"n":"A1","x":"10","y":"400","w":"80","h":"20","r":"0"},{"id":14,"n":"A1","x":"10","y":"430","w":"80","h":"20","r":"0"}];

var dev = /http:\/\/localhost/.test(window.location.href);

window.onload = function () {
  var btnOpen = document.querySelector('.btn-open');
  var navigation = document.querySelector('.navigation');
  var btnCreate = document.querySelector('.btn-create');
  var btnSave = document.querySelector('.btn-save');
  var room = document.querySelector('.room');
  var controls = document.querySelectorAll('.control-panel div input');
  var boxAttr = document.querySelector('.box-attr');

  // 边界
  var boundary = {
    w: room.offsetWidth - parseInt(getStyle(room, 'borderWidth')) * 2,
    h: room.offsetHeight - parseInt(getStyle(room, 'borderWidth')) * 2
  };

  var arr = [];

  // 载入已保存数据
  if (dev) {
    var getData = localStorage.shelfPos || [];
    drawShelf(JSON.parse(getData));
  } else {
    drawShelf(strJson);
  }

  // btnOpen.onclick = () => {
  //   navigation.style.opacity = '1';
  // }

  // 点击创建按钮
  btnCreate.onclick = function () {
    var options = [{
      w: controls[0].value,
      h: controls[1].value,
      x: controls[2].value,
      y: controls[3].value,
      r: controls[4].value,
      n: controls[5].value,
      id: new Date().getTime()
    }];
    drawShelf(options);
    // let div1 = new Box(options);
    // div1.id = arr.length;
    // arr.push(div1);       // 将对象放入数组
    // div1.showBox(room);   // 对象插入room
    // div1.drag(boundary);  // 对象拖拽
    // // 对象右键菜单
    // div1.ele.oncontextmenu = function(ev) {
    //   console.log(arr);
    //   let oEvent = ev || event;
    //   boxAttr.style.display = 'block';
    //   boxAttr.style.left = oEvent.clientX + 'px';
    //   boxAttr.style.top = oEvent.clientY + 'px';
    //   boxAttr.innerHTML = `
    //   <p>名称: ${div1.n}</p>
    //   <p>ID: ${div1.id}</p>
    //   <p>宽度: ${div1.w}</p>
    //   <p>高度: ${div1.h}</p>
    //   <p>坐标x: ${div1.x}</p>
    //   <p>坐标y: ${div1.y}</p>
    //   <p>旋转: ${div1.r}</p>
    //   <input type="button" value="删除" class="deleteobj" />
    //   `;
    //
    //   // 删除按钮
    //   let btnDelete = document.querySelector('.deleteobj');
    //   btnDelete.onclick = () => {
    //     let index = arr.indexOf(div1);
    //     // console.log(index);
    //     arr.splice(index,1);
    //
    //     room.removeChild(div1.ele);
    //     boxAttr.innerHTML = '';
    //     boxAttr.style.display = 'none';
    //   }
    //
    //
    //   return false;
    // };
  };
  // 保存按钮
  btnSave.onclick = function () {
    var shelfData = [];
    for (var i = 0; i < arr.length; i++) {
      var json = JSON.parse(JSON.stringify(arr[i]));
      delete json.ele;
      shelfData.push(json);
    }

    if (dev) {
      console.log(shelfData);
      localStorage.shelfPos = JSON.stringify(shelfData);
    } else {
      var thedata = "shelfData=" + JSON.stringify(shelfData);

      $.ajax({
        type: "POST",
        url: window.location.href,
        data: thedata
      }).done(function (contents) {
        alert('保存成功');
        window.close();
      }).fail(function (data) {
        // Optionally alert the user of an error here...
        window.close();
      });

      arr = shelfData;
    }
  };

  document.body.onclick = function () {
    boxAttr.style.display = 'none';
  };
  boxAttr.onclick = function (ev) {
    var oEvent = ev || event;
    oEvent.cancelBubble = true;
  };

  function drawShelf(data) {
    var temarr = data;

    var _loop = function _loop(i) {
      var divBox = new Box(temarr[i]);
      // divBox.id = arr.length;
      arr.push(divBox); // 将对象放入数组
      divBox.showBox(room); // 对象插入room
      divBox.drag(boundary); // 对象拖拽
      // 对象右键菜单
      divBox.ele.oncontextmenu = function (ev) {
        // console.log(arr);
        boxAttr.style.display = 'block';
        boxAttr.style.left = ev.clientX + 'px';
        boxAttr.style.top = ev.clientY + 'px';
        boxAttr.innerHTML = '\n        <p>\u540D\u79F0: ' + divBox.n + '</p>\n        <p>ID: ' + divBox.id + '</p>\n        <p>\u5BBD\u5EA6: ' + divBox.w + '</p>\n        <p>\u9AD8\u5EA6: ' + divBox.h + '</p>\n        <p>\u5750\u6807x: ' + divBox.x + '</p>\n        <p>\u5750\u6807y: ' + divBox.y + '</p>\n        <p>\u65CB\u8F6C: ' + divBox.r + '</p>\n        <input type="button" value="\u5220\u9664" class="deleteobj" />\n        ';

        // 删除按钮
        var btnDelete = document.querySelector('.deleteobj');

        btnDelete.onclick = function () {
          var index = arr.indexOf(arr[i]);
          console.log(index);
          arr.splice(index, 1);

          console.log(arr);
          room.removeChild(divBox.ele);
          boxAttr.innerHTML = '';
          boxAttr.style.display = 'none';
        };

        return false;
      };
    };

    for (var i = 0; i < temarr.length; i++) {
      _loop(i);
    }
  }
};

var Box = function () {
  function Box(options) {
    _classCallCheck(this, Box);

    // this.bg = options.bg || 'orange';
    this.id = options.id;
    this.n = options.n || 0;
    this.x = options.x || 0;
    this.y = options.y || 0;
    this.w = options.w || '80';
    this.h = options.h || '20';
    this.r = options.r || 0;
    // this.scale=options.scale||1;
    this.ele = null;
  }

  Box.prototype.showBox = function showBox(parent) {
    var oDiv = document.createElement('div');
    oDiv.className = 'bookshelf';
    oDiv.style.width = isNaN(this.w) ? this.w : this.w + 'px';
    oDiv.style.height = isNaN(this.h) ? this.h : this.h + 'px';
    oDiv.style.background = this.bg;
    oDiv.style.left = isNaN(this.x) ? this.x : this.x + 'px';
    oDiv.style.top = isNaN(this.y) ? this.y : this.y + 'px';
    oDiv.style.transform = 'rotate(' + this.r + 'deg)';

    this.ele = oDiv;
    parent.appendChild(oDiv);
  };

  Box.prototype.drag = function drag(range) {
    var _this = this;

    var x = this.x;
    var y = this.y;
    this.ele.onmousedown = function (ev) {
      var oEvent = ev || event;
      var disX = oEvent.clientX - x;
      var disY = oEvent.clientY - y;
      // console.log(disX,disY);
      var startX = oEvent.clientX;
      var startY = oEvent.clientY;
      var ele = _this.ele;

      if (_this.ele.setCapture) {
        _this.ele.onmousemove = mouseMove.bind(_this);
        _this.ele.onmouseup = mouseUp;
        _this.ele.setCapture();
      } else {
        document.onmousemove = mouseMove.bind(_this);
        document.onmouseup = mouseUp;
      }

      function mouseMove(ev) {
        // console.log(this);
        var oEvent = ev || event;
        x = oEvent.clientX - disX;
        y = oEvent.clientY - disY;
        if (x <= 0) x = 0;
        if (y <= 0) y = 0;
        if (x >= range.w - this.ele.offsetWidth) x = range.w - this.ele.offsetWidth;
        if (y >= range.h - this.ele.offsetHeight) y = range.h - this.ele.offsetHeight;

        this.ele.style.left = x + 'px';
        this.ele.style.top = y + 'px';
        this.x = x;
        this.y = y;
      }

      function mouseUp() {
        this.onmousemove = null;
        this.onmouseup = null;
        this.releaseCapture && this.releaseCapture();
      }

      return false;
    };
  };

  Box.prototype.outPutAttr = function outPutAttr() {};

  return Box;
}();